<template>
  <el-container class="layout-page">
    <div class="bian">
      <el-aside class="left-aside" width="200px">
        <!-- :default-active="" -->
        <el-menu
          class="el-menu-vertical-demo"
          :default-active="$route.path"
          router
          background-color="#fff"
          text-color="#333"
          active-text-color="#ffb200"
          @open="handleOpen"
          @close="handleClose"
          @click="choniceFn"
        >
          <div class="log">
            <img
              class="logo-yf"
              src="http://www-wms-java.itheima.net/img/logo@2x.2c4f2c76.png"
              alt=""
            />
          </div>
          <el-scrollbar class="myscrollbar" style="height: 100%">
            <div class="size">
              <!-- 侧边 帝可得首页项目s -->
              <div class="first-level">
                <el-menu-item index="/dashboard">
                  <i class="el-icon-house"></i>
                  <span class="title sp1">工作台</span>
                </el-menu-item>
              </div>
              <!-- 基础信息管理 -->
              <el-submenu index="/article">
                <template slot="title">
                  <i class="el-icon-date"></i>
                  <span class="sp1">基础信息管理</span>
                </template>
                <el-menu-item-group>
                  <!-- <template slot="title">分组一</template> -->
                  <el-menu-item index="/warehouseManagement">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>仓库管理</span>
                  </el-menu-item>
                  <el-menu-item index="/area">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>库区管理</span>
                  </el-menu-item>
                  <el-menu-item index="/warehouseLocation">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>库位管理</span>
                  </el-menu-item>
                  <el-menu-item index="/LocationView">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>库位视图</span>
                  </el-menu-item>
                  <el-menu-item index="/productManagement">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>货品管理</span>
                  </el-menu-item>
                  <el-menu-item index="/ItemtypeManagement">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>货品类型管理</span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 商务管理 -->
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-map-location"></i>
                  <span class="sp1">商务管理</span>
                </template>
                <el-menu-item-group>
                  <!-- <template slot="title">分组一</template> -->
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>货主管理</span>
                  </el-menu-item>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>承运商管理</span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 库内管理 -->
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-mobile"></i>
                  <span class="sp1">库内管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>盘点单</span>
                  </el-menu-item>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>盘点任务</span>
                  </el-menu-item>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>库存损益</span>
                  </el-menu-item>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>实时库存</span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 出库管理 -->
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span class="sp1">入库管理</span>
                </template>
                <el-menu-item-group>
                  <!-- <template slot="title">分组一</template> -->
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>出库单</span>
                  </el-menu-item>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>入库单</span>
                  </el-menu-item>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>收获任务</span>
                  </el-menu-item>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>上架任务</span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 出库管理 -->
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span class="sp1">出库管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>出库单</span>
                  </el-menu-item>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>拣货任务</span>
                  </el-menu-item>
                  <el-menu-item index="/article">
                    <div class="sub-item-dot">
                      <div class="vline"></div>
                      <div class="dot"></div>
                    </div>

                    <span>交接任务</span>
                  </el-menu-item>
                  <!-- <template slot="title">分组一</template> -->
                </el-menu-item-group>
              </el-submenu>

              <!--底部操作 -->
            </div>
            <div class="sidebar-tools">
              <img
                src="https://img2.baidu.com/it/u=699745892,3289702803&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt=""
                class="icon"
              />
              <div class="title">admin</div>
              <div class="divSplit"></div>
              <img
                class="quit"
                src=""
                alt=""
              />
            </div>
          </el-scrollbar>
        </el-menu>
      </el-aside>
    </div>
    <el-container>
      <el-header>
        <div class="headr">
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            editable
            @edit="handleTabsEdit"
          >
            <el-tab-pane
              :key="item.name"
              v-for="item in editableTabs"
              :label="item.title"
              :name="item.name"
            >
            </el-tab-pane>
          </el-tabs>
          <div
            class="logout"
            style="
              background-color: #fff;
              width: 36px;
              height: 36px;
              border-radius: 6px;
              margin-right: 36px;
              margin-top: 15px;
            "
          >
            <span style="padding-left: 8px; line-height: 36px; font-size: 20px"
              >⮟</span
            >
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'LayoutIndex',
  data () {
    return {
      editableTabsValue: '2',
      editableTabs: [
        {
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        },
        {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        }
      ],
      tabIndex: 2,

      username: '',
      avatar: ''
    }
  },
  async created () {
    // const res = await getUser()
    // console.log(res)
    // this.username = res.data.name
    // this.avatar = res.data.avatar
  },
  methods: {

    handleTabsEdit (targetName, action) {
      if (action === 'add') {
        const newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        const tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
      }
    },

    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    handleConfirm () {
      this.$store.commit('user/logout')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  background-color: #fdfafa;
  margin-bottom: 0px;
}
.sub-item-dot {
  display: inline-block;
  margin-right: 16px;
  .vline {
    height: 20px;
    border-left: 1px solid #d9d0cf;
    border-right: 0;
    position: absolute;
    top: -10px;
    margin-left: 2px;
  }
  .dot {
    width: 6px;
    height: 6px;
    background: #d9d0cf;
    border-radius: 50%;
  }
}
// .box {
//   display: flex;
//   .sub-item-dot {
//     display: inline-block;
//     margin-right: 16px;

//     .vline {
//       height: 20px;
//       border-left: 1px solid #d9d0cf;
//       border-right: 0;
//       position: absolute;
//       top: -10px;
//       margin-left: 2px;
//     }
//     .dot {
//       width: 6px;
//       height: 6px;
//       background: #d9d0cf;
//       border-radius: 50%;
//     }
//   }
// }

.sidebar-tools {
  height: 62px;
  width: 226px;
  background-color: #fff;
  border-top: 1px solid #f5efee;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  bottom: 0px;
  .icon {
    width: 32px;
    height: 32px;
    margin-left: 41px;
    margin-right: 14px;
  }
  .title {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #332929;
    line-height: 20px;
  }
  .divSplit {
    height: 17px;
    border-left: 1px solid #d9d0cf;
    border-right: 0;
    margin-left: 17px;
    margin-right: 17px;
  }
  .quit {
    width: 21px;
    height: 21px;
    cursor: pointer;
    color: #b5abab;
  }
}
::v-deep .el-tabs__item {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 36px;
  background: #fff;
  border-radius: 6px;
  line-height: 36px;
  color: #b5abab;
  padding: 0 9px 0 15px;
  font-size: 13px;
  margin-left: 10px;
  margin-top: 14px;
  margin-bottom: 14px;
  font-weight: 400;
  font-family: PingFangSC, PingFangSC-Regular;
}
::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: 0;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  // box-sizing: border-box;
}
.el-header {
  background-color: #f5f1f1;
}
.headr {
  background-color: #f5f1f1;
  width: 100%;
  margin-top: 15px;

  display: flex;
  justify-content: space-between;
}
::v-deep .el-tabs__item.is-active {
  color: #ffb200;
}
::v-deep .el-tabs__item:hover {
  color: #e4e7ed;
  cursor: pointer;
}

::v-deep .first-level:first-child .is-active {
  color: #ffb200;

  width: 100%;
  height: 100%;
  background-color: #fff6e2 !important;
  border-radius: 0 100px 100px 0;
  z-index: 999;
  display: block;
}
// 相当于是一个active后面再想办法设置
//  .el-menu-item.is-active {
//   background: #fff6e2 !important;
//   border-radius: 0 100px 100px 0;
// }

.el-aside {
  transition: width 0.28s;
  width: 226px !important;
  height: 100%;
  font-size: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  background: #fff;
  box-shadow: 3px 0 6px 0 rgb(144 142 142 / 13%);
}

.layout-page .el-aside .el-menu[data-v-8a54e678] {
  margin-top: 0px;
}
.layout-page .el-aside[data-v-8a54e678] {
  background-color: #fff;
}

.left-aside {
  background-color: #001529;
  overflow-y: hidden;
}
::v-deep .element.style {
  height: 100%;
  color: rgb(255, 178, 0);
}
.sp1 {
  padding-left: 10px;
  font-size: 14px;
  color: rgb(136, 126, 126);
}
::v-deep .el-submenu.is-active .el-submenu__title {
  background: #fff6e2 !important;
  border-radius: 0 100px 100px 0;
}
.size {
  margin-right: 20px;
  height: 88vh;
}
.myscrollbar {
  height: 100%;
}
.myscrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
.log {
  position: relative;
  width: 100%;
  height: 100px;
  line-height: 100px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .logo-yf {
    display: block;
    width: 150px;
    height: 64px;
  }
}
.layout-page {
  height: 100vh;
  .el-aside {
    background: #f8fafd;
    .logo {
      color: #fff;
      font-size: 20px;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
    .el-menu {
      border-right: none;
      margin-top: 20px;
      background-color: #fff;
    }
  }

  .el-header {
    box-shadow: 0px 0px 35px 0px rgba(154, 161, 171, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    height: 70px;
    background-color: #f5f1f1;
    .img {
      display: flex;
      height: 35px;
      // width: 120px;
      // text-align: right;
      // margin-right: 1200px;

      // align-items: center;
      // border: 1px solid #f1f3fa;
    }
  }
  .user {
    // width: 300px;
    display: flex;
    align-items: center;
    // background: #fafbfd;
    height: 60px;
    // border: 1px solid #f1f3fa;
    padding: 0 15px;
    .el-avatar {
      margin-right: 15px;
    }
    .logout {
      background-color: #fff;
      width: 36px;
      height: 36px;
      .span {
        margin-top: 15px;
        background-color: rgb(10, 9, 9);
        border-radius: 6px;
        position: absolute !important;
        right: 34px;
        top: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .el-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #aaa;
    border-top: 1px solid rgba(152, 166, 173, 0.2);
    font-size: 14px;
  }
}
</style>
